<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="create">创建用户</button>
    <button id="delete">删除用户</button>
    <button id="update">更新用户</button>
    <button id="query">查看单个用户</button>
    <button id="queryAll">查看所有用户</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*     //设置基本的url
    axios.defaults.baseURL = 'http://localhost:3000'
    //批量设置请求头 common就是指针对所有的请求生效
    axios.defaults.headers.common['count']='1';
    //设置所有post请求的请求头
    axios.defaults.headers.post['age']='18'; */
    const instance1 = axios.create({
        baseURL:'http://localhost:3000'
    });
    const instance2 = axios.create({
        baseURL:'http://localhost:5000'
    });
    let createButton = document.querySelector('#create');
    let deleteButton = document.querySelector('#delete');
    let updateButton = document.querySelector('#update');
    let queryButton = document.querySelector('#query');
    let queryAllButton = document.querySelector('#queryAll');
    //相同的配置项可以在不同的地方设置，优先排序 
    //调用时用户传的优化级最高>create创建实例时传的参数>默认值axios.defaults.baseURL
    createButton.addEventListener('click',()=>{
        instance1({
            baseURL:'http://localhost:3000',
            method:'post',//请求的方法名
            url:'/users',//请求的url
            data:{
                name:'zhufeng1',
                age:18
            }
        }).then(response=>{
            let {data} = response;
            console.log(data)
        }).catch(err=>{
            console.log(first)
        });
    });
    queryButton.addEventListener('click',()=>{
        instance1({
            method:'get',//请求的方法名
            url:'/users',//请求的url
            params:{//查询参数对象
                id:1
            }
        }).then(response=>{
            let {data} = response;
            console.log(data)
        }).catch(err=>{
            console.log(err)
        });
    });
    updateButton.addEventListener('click',()=>{
        instance1({
            method:'PUT',//请求的方法名
            url:'/users',//请求的url
            params:{//查询参数对象
                id:1
            },
            data:{
                name:'zhufeng11',
                age:181
            }
        }).then(response=>{
            let {data} = response;
            console.log(data)
        });
    });
    deleteButton.addEventListener('click',()=>{
        instance1({
            method:'DELETE',//请求的方法名
            url:'/users',//请求的url
            params:{//查询参数对象
                id:1
            }
        }).then(response=>{
            let {data} = response;
            console.log(data)
        });
    });
</script>
</body>
</html>